<template>
	<m-layout class="home" :isShow="false" barBg="unset" gap="0 24" scrollColor="#FFD100" :scrollTop="scrollTop">
		<!-- 导航 -->
		<template v-slot:header>
			<Mheader ref="mheader" />
		</template>
		<!-- 分类 -->
		<!-- <Sliding @onChange="onChange" /> -->
		<!-- 默认精选 -->
		<template v-if="oneType=='-1'">
			<!-- banner -->
			<m-swiper class="mt-20" height="240rpx" :bnannerList="bnannerList" />
			<!--金刚区  -->
			<!-- 公告 -->
			<!-- <m-notice ref="notice" class="mt-20" /> -->
			<!-- 打印机专区 -->
			<swiper class="goodsSwiper mt-20" indicator-color="#CECECE" indicator-active-color="#CECECE"
				:indicator-dots="true" :autoplay="false" :style="{height:`${280*(Number(currIndex)==0?giftGoodsInfo.length:listArr.length)}rpx`}"
				:current="currIndex" @change="changeSwiper">
				<swiper-item class="swiper-item" id="wrap0">
					<view class="flex-between">
						<view class="flex">
							<text>打印机专区</text>
							<text class="mlr-20 text-grey">|</text>
							<text class="fs22 ml-12 text-grey">租赁、托管、提货</text>
						</view>
						<view class="flex"
							@click="Jump(`/pages/home/goodsList/goodsList?oneId=502&tName=打印机专区&wards=1`)">
							<text class="fs21 text-grey">更多</text>
							<m-icon size="24" color="#888" type="icon-qianjin" />
						</view>
					</view>
					<m-block class="mainFun_ul" :isLoading="isLoading">
						<view class="mainFun_ul_li flex-between ai-inherit" v-for="item in giftGoodsInfo">
							<view class="flex ptb-24 border-bottom" style="width: 100%;"
								@click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + item.id)">
								<m-image2 :size="[240,220]" :src="item.picurl" radius="12" />
								<view class="flex-column pl-20 flex-1" >
									<view class="flex-column flex-1">
										<text class="fs28 fw-600">{{item.goodsname}}</text>
										<text class="fs22 mt-12 otp3">{{item.sketch}}</text>
									</view>
									<view class="flex-between">
										<view class="flex">
											<m-price :size="[34, 21]" :value="item.price" color="#F95F5F"></m-price>
										</view>
										<view class="buyBtn mt-12">了解更多</view>
									</view>
								</view>
							</view>
						</view>
					</m-block>
				</swiper-item>
				<swiper-item class="swiper-item" id="wrap1">
					<view class="flex-between">
						<view class="flex">
							<text>耗材专区</text>
							<text class="mlr-20 text-grey">|</text>
							<text class="fs22 ml-12 text-grey">打印纸、照片纸、墨水、维护箱</text>
						</view>
						<view class="flex"
							@click="Jump(`/pages/home/goodsList/goodsList?oneId=503&tName=耗材专区&wards=2`)">
							<text class="fs21 text-grey">更多</text>
							<m-icon size="24" color="#888" type="icon-qianjin" />
						</view>
					</view>
					<m-block class="mainFun_ul" :isLoading="isLoading">
						<view class="mainFun_ul_li flex-between ai-inherit" v-for="item in listArr">
							<view class="flex ptb-24 border-bottom" style="width: 100%;"
								@click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + item.id)">
								<m-image2 :size="[240,220]" :src="item.picurl" radius="12" />
								<view class="flex-column pl-20 flex-1">
									<view class="flex-column flex-1">
										<text class="fs28 fw-600">{{item.goodsname}}</text>
										<text class="fs22 mt-12 otp3">{{item.sketch}}</text>
									</view>
									<view class="flex-between">
										<view class="flex">
											<m-price :size="[34, 21]" :value="item.price" color="#F95F5F"></m-price>
										</view>
										<view class="buyBtn mt-12">了解更多</view>
									</view>
								</view>
							</view>
						</view>
						<m-loading class="" gap="40 0" :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
					</m-block>
				</swiper-item>
			</swiper>
			<!-- AI美食机 -->
			<swiper class="goodsSwiper mb-60" indicator-color="#CECECE" indicator-active-color="#CECECE"
				:indicator-dots="true" :autoplay="false" :style="{height:`${280*(Number(currIndex2)==0?giftGoodsInfo2.length:listArr2.length)}rpx`}"
				:current="currIndex2" @change="changeSwiper2">
				<swiper-item class="swiper-item" id="wrap0">
					<view class="flex-between">
						<view class="flex">
							<text>AI美食机专区</text>
							<text class="mlr-20 text-grey">|</text>
							<text class="fs22 ml-12 text-grey">租赁、托管、提货</text>
						</view>
						<view class="flex"
							@click="Jump(`/pages/home/goodsList/goodsList?oneId=508&tName=AI美食机专区&wards=3`)">
							<text class="fs21 text-grey">更多</text>
							<m-icon size="24" color="#888" type="icon-qianjin" />
						</view>
					</view>
					<m-block class="mainFun_ul" :isLoading="isLoading">
						<view class="mainFun_ul_li flex-between ai-inherit" v-for="item in giftGoodsInfo2">
							<view class="flex ptb-24 border-bottom" style="width: 100%;"
								@click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + item.id)">
								<m-image2 :size="[240,220]" :src="item.picurl" radius="12" />
								<view class="flex-column pl-20 flex-1" >
									<view class="flex-column flex-1">
										<text class="fs28 fw-600">{{item.goodsname}}</text>
										<text class="fs22 mt-12 otp3">{{item.sketch}}</text>
									</view>
									<view class="flex-between">
										<view class="flex">
											<m-price :size="[34, 21]" :value="item.price" color="#F95F5F"></m-price>
										</view>
										<view class="buyBtn mt-12">了解更多</view>
									</view>
								</view>
							</view>
						</view>
					</m-block>
				</swiper-item>
				<swiper-item class="swiper-item" id="wrap1">
					<view class="flex-between">
						<view class="flex">
							<text>食品专区</text>
							<text class="mlr-20 text-grey">|</text>
							<text class="fs22 ml-12 text-grey">米饭，面食，糕点，冷饮</text>
						</view>
						<view class="flex"
							@click="Jump(`/pages/home/goodsList/goodsList?oneId=509&tName=食品专区&wards=4`)">
							<text class="fs21 text-grey">更多</text>
							<m-icon size="24" color="#888" type="icon-qianjin" />
						</view>
					</view>
					<m-block class="mainFun_ul" :isLoading="isLoading">
						<view class="mainFun_ul_li flex-between ai-inherit" v-for="item in listArr2">
							<view class="flex ptb-24 border-bottom" style="width: 100%;"
								@click="Jump('/pages/home/goodsDetail/goodsDetail?id=' + item.id)">
								<m-image2 :size="[240,220]" :src="item.picurl" radius="12" />
								<view class="flex-column pl-20 flex-1">
									<view class="flex-column flex-1">
										<text class="fs28 fw-600">{{item.goodsname}}</text>
										<text class="fs22 mt-12 otp3">{{item.sketch}}</text>
									</view>
									<view class="flex-between">
										<view class="flex">
											<m-price :size="[34, 21]" :value="item.price" color="#F95F5F"></m-price>
										</view>
										<view class="buyBtn mt-12">了解更多</view>
									</view>
								</view>
							</view>
						</view>
						<m-loading class="" gap="40 0" :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
					</m-block>
				</swiper-item>
			</swiper>
		</template>
	</m-layout>
</template>

<script>
	import Mheader from './components/header.vue';
	import Sliding from './components/sliding.vue';
	import { GetGoodsPage } from '@/api/Goods.js';
	import { GetNewsPage } from "@/api/News.js";
	import { GetGoodsTypePage } from '@/api/Goods.js'
	// import { banklist } from "@/api/Users.js"
	export default {
		name: '',
		components: { Mheader, Sliding },
		data() {
			return {
				swiperHeight: 0, // 滑块的高度(单位px)
				currIndex: 0, // 当前索引
				TabCur: 0,
				scrollLeft: 0,
				newsList: '',
				bnannerList: [],
				search: '',
				city: '搜鹭合伙人',
				scrollTop: 0,
				idx: 1, //  1 ---礼包专区   2 ---刺梨工坊   3 ---新品推荐  4 ---热卖爆款
				priceList: [{
						name: '刺梨工坊',
						des: '精品礼包',
						idx: 1
					},
					{
						name: '刺梨工坊',
						des: '啤酒饮品',
						idx: 2
					},
					{
						name: '刺梨工坊',
						des: '口服VC',
						idx: 3
					},
					{
						name: '刺梨工坊',
						des: '新潮零食',
						idx: 4
					},
					{
						name: '刺梨工坊',
						des: '保健日化',
						idx: 5
					}, {
						name: '刺梨工坊',
						des: '新品发布',
						idx: 6
					}
				],
				current: 0,
				listArr: [], // 商品列表
				pageSize: 10,
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
				// add
				oneType: '-1',
				children: [],
				clickPriceList: false,
				mHeight: 0,
				giftGoodsInfo: [],
				giftGoodsInfo2:[],
				listArr2:[],
				currIndex2:0,
			};
		},
		watch: {
			current(val) {
				this.clickPriceList = true;
				console.log("val===>", val)
				this.idx = val + 1;
				this.listArr = [];
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			scrollTop(oldVal, newVal) {
				// console.log('oldVal,newVal==>', oldVal, newVal)
			}
		},
		computed: {

		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
			const query = uni.createSelectorQuery().in(this);
		},
		onLoad() {
			// banklist()
			this.$nextTick(async() => {
				// if (this.oneType == '-1') {
				// 	this.$refs.notice.getNotice();
				// }
				await this.reset();
				 // this.setSwiperHeight(); // 动态设置 swiper 的高度
			});
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.mheader.getUnreadcount()
			})

		},
		methods: {
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				console.log('e===>',e.detail.current)
			  this.currIndex = e.detail.current;
			},
			changeSwiper2(e) {
				console.log('e===>',e.detail.current)
			  this.currIndex2 = e.detail.current;
			},
			/* 动态设置 swiper 的高度 */
			// setSwiperHeight() {
			//   const element = "#wrap" + this.currIndex;
			//   const query = uni.createSelectorQuery().in(this);
			//   query.select(element).boundingClientRect();
			//   query.exec(res => {
			// 	  console.log('res===>',res)
			// 	  console.log('res[0].height',res[0].height)
			//     if (res && res[0]) this.swiperHeight = res[0].height;
			//   });
			// },
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 分类 当前选中id
			onChange(id) {
				console.log('id===>', id)
				this.oneType = id;
				if (id <= 0) return this.clickPriceList = false;
				this.getTList(id);
			},
			async getTList(id) {
				const { success, list } = await GetGoodsTypePage({
					pid: id,
					pageSize: 1000
				});
				this.children = list;
			},
			async reset() {
				this.listArr = [];
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getBanner();
				await this.getData();
				await this.sleep(300)
				await this.getGift();
				await this.sleep(300)
				await this.getData2();
				await this.sleep(300)
				this.getGift2();
			},
			// 获取banner列表
			async getBanner() {
				const { success, list, msg, code } = await GetNewsPage({
					code: 'banner',
					pageIndex: 1,
					pageSize: 10,
				})
				this.bnannerList = list;
			},
			// 通过分类id获取指定商品列表
			async getData() {
				// if (this.pageIndex > this.pageCount) return;
				this.isLoading = true;
				const { success, list, pageCount } = await GetGoodsPage({
					wards: 2,
					istop: 1,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				console.log('list===>', list);
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				// this.pageIndex++;
				// uni.stopPullDownRefresh();
			},
			// 通过分类id获取指定商品列表
			async getData2() {
				// if (this.pageIndex > this.pageCount) return;
				this.isLoading = true;
				const { success, list, pageCount } = await GetGoodsPage({
					wards: 4,
					istop: 1,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				console.log('list===>', list);
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr2 = list;
				} else {
					this.listArr2 = [...this.listArr, ...list];
				}
				// this.pageIndex++;
				// uni.stopPullDownRefresh();
			},
			async getGift() {
				const { success, list, pageCount } = await GetGoodsPage({
					wards: 1,
					pageIndex: 1,
					pageSize: 5,
				});
				this.giftGoodsInfo = list.slice(0, 5) || []
			},
			async getGift2() {
				const { success, list, pageCount } = await GetGoodsPage({
					wards: 3,
					pageIndex: 1,
					pageSize: 5,
				});
				this.giftGoodsInfo2 = list.slice(0, 5) || []
			}
		},
		onPullDownRefresh() {
			// this.reset();
		},
		onReachBottom() {
			if (this.oneType == '-1') {
				if (this.clickPriceList) return;
				// this.getData();
			} else {
				this.$refs.hot.getData()
			}
			console.log('触底了');
		}
	};
</script>

<style lang="scss">
	.home {
		padding-bottom: 60rpx;
		// background: url('@/static/images/pages/home/index-topbg3.png') no-repeat;
		// background: url('@/static/images/pages/home/headerBg.png') no-repeat;
		background: linear-gradient(180deg, #fff 0%, #fff 10%, #f5f5f5 18%, #f5f5f5 100%) !important;
		/* #ifdef APP-PLUS */
		background-size: 100% 500rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		background-size: 100% 560rpx;
		/* #endif */

		::v-deep .top-nav {
			// background: url('@/static/images/pages/home/index-topbg1.png')no-repeat !important;
			background-size: 100% 100% !important;
			background-color: unset;
			background-position: top left;
		}
	}

	.swiper-box {
		.swiper {
			height: 240rpx;

			::v-deep.uni-swiper-wrapper {
				border-radius: 10rpx;
				overflow: hidden;
			}

			.swiper-item {
				height: 240rpx;

				.banner-img {
					width: 100%;
					height: 240rpx;
					//border-radius: 16rpx;
				}
			}

			::v-deep {
				.uni-swiper-dot {
					width: 10rpx;
					height: 10rpx;
					background: #f6f6f6 !important;
					border-radius: 5rpx;

					&.uni-swiper-dot-active {
						width: 20rpx;
					}
				}
			}
		}
	}

	.goods-list {
		.head {
			background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
			padding: 24rpx 0rpx 0rpx;

			.ul {
				overflow-x: auto;
				padding-bottom: 20rpx;

				.li {
					// min-width: 140rpx;
					margin-right: 30rpx;

					text:nth-of-type(1) {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;
					}

					text:nth-of-type(2) {
						display: block;
						padding: 4rpx 14rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #c6c6c6;
					}
				}

				.active {
					&>text:nth-of-type(1) {
						color: #18c03b !important;
					}

					&>text:nth-of-type(2) {
						display: block;
						padding: 4rpx 14rpx;
						display: inline-block;
						color: #ffffff;
						background: #18c03b;
						border-radius: 36rpx;
					}
				}
			}
		}

		.list {

			// padding-bottom: var(--window-bottom);
			.goods {
				display: grid;
				grid-template-columns: auto 1fr;
				background: #ffffff;
				border-radius: 20rpx;
				margin: 20rpx 0;
				padding: 25rpx;

				.right {
					overflow-x: hidden;
					padding-left: 20rpx;

					.title {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.activity {
						padding: 15rpx 0;

						.tit {
							padding: 0 8rpx;
							position: relative;
							height: 42rpx;
							line-height: 42rpx;
							display: inline-block;

							&>view {
								position: relative;
								z-index: 9;
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #ffffff;
							}

							&::after {
								transform: skewX(-10deg);
								content: '';
								display: block;
								position: absolute;
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								background: var(--theme);
								border-radius: 10rpx 0px 0px 10rpx;
							}
						}

						.tit2 {
							padding: 0rpx 12rpx;
							height: 42rpx;
							position: relative;
							display: inline-block;

							line-height: 42rpx;

							&>view {
								position: relative;
								z-index: 9;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: var(--theme);
								;
							}

							&::after {
								transform: skewX(-10deg);
								content: '';
								display: block;
								position: absolute;
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								background: rgba(0, 204, 146, 0.12);
								border-radius: 0 10rpx 10rpx 0;
							}
						}
					}

					.moress {
						padding: 10rpx 0;

						.ul {
							.li {
								width: 48rpx;
								height: 48rpx;
								background: #f6f6f6;
								border-radius: 6rpx;
								margin-right: 10rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	.address {
		text:nth-of-type(1) {
			font-family: PingFang SC;
			color: #333;
		}
	}

	.ad-card {
		margin-top: 20rpx !important;

		image {
			width: 100%;
			height: 167rpx;
		}
	}

	.class-box {
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		margin-top: 20rpx !important;

		.class-card {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-gap: 11rpx;

			view {
				text-align: center;

				.image-box {
					width: 110rpx;
					height: 110rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.more-box {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}

	.tbs-box {
		padding: 0 24rpx 17rpx;
		position: relative;
		z-index: 1;
	}

	.cu-item {
		height: 46px;
		display: inline-block;
		line-height: 46px;
		margin: 0 5px;
		padding: 0 10px;
	}

	.mainFun {
		align-items: initial;
		padding: 24rpx;
		border-radius: 24rpx;
		background-color: #FFF;

		&>view:nth-of-type(1) {
			flex: 1;
		}

		.mainFun_ul {
			display: grid;
			grid-template-rows: auto 3fr;
			background: #ffffff;
			border-radius: 20rpx;
			margin: 20rpx 0;
			padding: 0rpx 0rpx 0rpx;
			min-height: 400rpx;
		}
	}

	.productList {
		flex-wrap: wrap;
		justify-content: space-between;

		&>view {
			border-radius: 8rpx;
			height: 480rpx;
			width: 48.2%;
			background-color: #FFFFFF;
			margin: 6rpx;
		}
	}

	.activeBtn {
		position: absolute;
		right: -20rpx;
		bottom: -20rpx;
		z-index: 22;
		width: 118rpx;
		height: 158rpx;
	}

	.swiper {
		::v-deep .uni-swiper-wrapper {
			overflow: unset !important;

			.uni-swiper-slides {
				overflow: hidden;
			}
		}

		::v-deep .uni-swiper-dots {
			position: absolute;
			bottom: -45rpx;

			.uni-swiper-dot {
				width: 40rpx !important;
				height: 4rpx !important;
				border-radius: 0rpx !important;
			}

			.uni-swiper-dot-active {
				background: #ffd100 !important;
			}
		}
	}

	.buyBtn {
		width: 200rpx;
		height: 55rpx;
		text-align: center;
		line-height: 55rpx;
		background: rgb(255, 209, 0) !important;
		border-radius: 12rpx;
		font-size: 21rpx;
	}

	.goodsSwiper {
		border-radius: 20rpx;
		background-color: #FFF;
		padding: 24rpx 24rpx 100rpx;
		// min-height:1100rpx;
		margin-bottom: 30rpx;
		::v-deep .uni-swiper-wrapper{
			overflow-x: hidden !important;
			padding-bottom: 40rpx;
			// overflow-y: unset !important;
		}
		::v-deep .uni-swiper-dot {
			position: relative;
			top: 20rpx;
			width: 10rpx;
			height: 10rpx;
			background: #d7d7d7  !important;
			border-radius: 5rpx;
		
			&.uni-swiper-dot-active {
				width: 20rpx;
				background: #a9a9a9 !important;
			}
		}
	}
</style>